<template>
  <div class="h-full w-[90%]">
    <div class="flex justify-around flex-wrap">
      <div v-for="proj in projs" :key="proj.id" class="mt-5">
        <div
          class="w-[300px] flex flex-col items-center p-5 gap-2 bg-gray-400 rounded-md hover:bg-slate-400 hover:shadow-md duration-300 relative group">
          <div class="w-[150px] h-[150px] rounded-full bg-yellow-50 overflow-hidden">
            <img src="../../public/draw.jpg" alt="" />
          </div>
          <div class="flex flex-col items-center">
            <span class="text-md text-gray-800">{{ proj.shortName }}</span>
            <span class="text-sm text-gray-600">{{ proj.name }}</span>
          </div>
          <div class="flex justify-between flex-col">
            <div class="text-xs text-gray-600">创建时间:{{ dayjs(proj.createdAt).format('YYYY年MM月DD日') }}</div>
            <div class="text-xs text-gray-600">修改时间:{{ dayjs(proj.updatedAt).format('YYYY年MM月DD日') }}</div>
          </div>
          <div class="bg-yellow-50 w-full rounded-md">
            <div class="flex justify-between items-center mx-2 my-2 border-b-[1px] border-gray-400">
              <div class="text-sm text-gray-500">放线区段列表</div>
              <div>
                <More theme="outline" size="24" class="text-gray-500 cursor-pointer" />
              </div>
            </div>
            <div v-for="sec in proj.section.slice(0, 3)" :key="sec.id" class="flex justify-between">
              <div class="text-xs mx-2 my-1 text-gray-400">{{ sec.name }}</div>
              <div class="mx-2" @click="router.push({ name: 'draw', params: { sectionId: sec.id } })">
                <RightSmall theme="outline" size="18" class="text-gray-500 cursor-pointer" />
              </div>
            </div>
          </div>

          <!-- 删除按钮 -->
          <div class="absolute right-5 top-5 hidden cursor-pointer group-hover:block">
            <Close theme="outline" size="16" class="text-gray-600" />
          </div>
        </div>
      </div>
      <!-- 添加框 -->
      <div
        class="w-[300px] flex items-center justify-center bg-gray-400 rounded-md hover:bg-slate-400 hover:shadow-md duration-300 mt-5">
        <div class="w-[150px] h-[150px] rounded-full bg-yellow-50 flex justify-center items-center cursor-pointer">
          <Plus theme="outline" size="100" fill="#333" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Close, More, Plus, RightSmall } from '@icon-park/vue-next'
import dayjs from 'dayjs'

import useProj from '@/composables/useProj'
import { useRouter } from 'vue-router'

const { all, projs } = useProj()
const router = useRouter()

all({ userId: 1 })
</script>
